<template>
	<view class="cata">
		<nav-bar :title="title"></nav-bar>

		<u-sticky bgColor="#fff" v-if="tabList&&tabList.length>1" :customNavHeight="customNavHeight"
			style="width: 100%;">
			<u-tabs :list="tabList" @change="changeSource" @click="changeSource" class="sticky"></u-tabs>
		</u-sticky>

		<!-- 页面状态 -->

		<u-loading-page :loading="pageState==-2"></u-loading-page>

		<u-empty v-if="pageState==-1" mode="wifi"></u-empty>

		<u-empty v-if="pageState==0 && (!allWebs || allWebs.length==0)" mode="data" text="暂无来源"></u-empty>

		<!-- 换源加载 -->

		<u-empty v-if="sourceState==-1" mode="wifi"></u-empty>

		<u-empty v-if="sourceState==0 && (!activeSections || activeSections.length==0)" mode="data">
		</u-empty>

		<u-loading-icon :show="sourceState==-2"></u-loading-icon>


		<uni-collapse @change="collapseChange" v-if="activeSections && activeSections.length>0" class="sticky">
			<block v-for="(section,index) in activeSections" :key="allWebs[activeIndex].text">
				<uni-collapse-item :title="section.title" :name="index" class="sticky">
					<uni-list v-if="section.show">
						<uni-list-item v-for="($chapter,i) in section.list" :key="i" :title="$chapter.title" clickable
							@click="toChapter($chapter.url)">
						</uni-list-item>
					</uni-list>
				</uni-collapse-item>
			</block>
		</uni-collapse>
	</view>
</template>

<script>
	import utils from '@/static/js/utils.js'
	export default {
		data() {
			return {
				// 不渲染
				contentsList: null,
				// 渲染
				bookId: -1,
				book: null,
				// 所有来源
				allWebs: null,
				// 所有的段落
				allContents: null,
				// 展示的段落列表
				activeSections: null,
				// 展示的段落列表在allContents的索引
				activeIndex: 0,
				pageState: -3,
				sourceState: -3
			}
		},
		computed: {
			customNavHeight() {
				return utils.system.getNavBar() + utils.system.getStatusBar()
			},
			title() {
				if (this.allWebs && this.allWebs.length > 0) {
					return this.allWebs[this.activeIndex].text
				}
				return ""
			},
			tabList() {
				if (!this.allWebs) {
					return null
				}
				let list = []
				for (let i = 0; i < this.allWebs.length; i++) {
					list.push({
						name: this.allWebs[i].text
					})
				}

				console.log("computer", list)
				return list
			}
		},
		methods: {

			collapseChange(e) {
				if (e && e.length > 0) {
					for (let i = 0; i < e.length; i++) {
						this.openItem(parseInt(e[i]))
					}
				}
			},
			openItem(index) {
				console.log("itemClick")
				if (this.activeSections[index].show === false) {
					this.activeSections[index].show = true
				}
			},
			changeSource(e) {
				console.log("change", e)
				let index = parseInt(e.index)
				if (this.allContents[index].length === 0) {
					// 内容为空时，单独请求该来源
					this.doChange(index)
				} else {
					this.activeIndex = index
					this.activeSections = this.allContents[index]
				}
			},

			bookLoad() {
				utils.http.get(`/book/${this.bookId}`).then(res => {
					if (res.status === 200) {
						this.book = res.data
					}
				})
			},
			// 切换来源
			doChange(index) {
				index = parseInt(index)
				this.sourceState = -2
				this.activeSections = null
				this.activeIndex = index

				let activeWeb = this.allWebs[index]
				utils.http.get(`/contents/vo/${this.bookId}/${activeWeb.webId}`).then(res => {
					this.sourceState = 0
					if (res.status == 200) {
						this.allContents[index] = this.parseChapters(res.data)

						this.activeSections = this.allContents[index]
					} else {
						this.allContents[index] = []

						this.activeSections = this.allContents[index]
					}
				}).catch(e => {
					if (this.sourceState == -2)
						this.sourceState = -1
				})
			},

			toChapter(url) {
				let activeWeb = this.allWebs[this.activeIndex]

				uni.navigateTo({
					url: `/pages/chapter/chapter?webId=${activeWeb.webId}&contentsId=${activeWeb.contentsId}&url=${url}&bookId=${this.bookId}`
				})
			},
			// 所有来源加载
			contentLoad() {
				this.pageState = -2

				utils.http.get(`/contents/vo/${this.bookId}`).then(res => {
					this.pageState = 0

					if (res.status == 200) {
						let list = res.data.list
						this.contentsList = res.data.list

						if (list && list.length > 0) {
							let allWebs = []
							let allContents = []

							for (let i = 0; i < list.length; i++) {
								let vo = list[i]
								let content = vo.contents.content
								if (content) {
									if (typeof content == 'string') {
										content = JSON.parse(content)
									}

									if (content.length > 0) {
										// 设置vo
										vo.contents.chapterList = content
									} else {
										vo.contents.chapterList = []
									}
								} else {
									vo.contents.chapterList = []
								}


								let chapterList = vo.contents.chapterList
								let sections = this.parseChapters(chapterList)

								if (chapterList.length > 0) {
									allContents.unshift(sections)
									allWebs.unshift({
										text: vo.web.site,
										webId: vo.web.id,
										contentsId: vo.contents.id
									})
								} else {
									allContents.push(sections)
									allWebs.push({
										text: vo.web.site,
										webId: vo.web.id,
										contentsId: vo.contents.id
									})
								}
							}

							this.allWebs = allWebs
							this.allContents = allContents
							this.allWebs[0].active = true
							this.activeSections = this.allContents[0]
						}

					}
				}).catch(e => {
					console.log('contents', e)
					if (this.pageState == -2)
						this.pageState = -1
				})
			},
			// 解析章节列表为段落列表,降低渲染代价
			parseChapters(chapters) {
				if (!chapters) {
					return []
				}
				// 段落列表
				let sections = []
				let section = null
				for (let i = 0; i < chapters.length; i++) {
					if (i % 20 == 0) {
						section = {
							title: `第 ${i+1}-${i+20} 章`,
							list: [],
							show: false
						}
						section.list.push(chapters[i])
						sections.push(section)
					} else {
						section.list.push(chapters[i])
					}
				}
				console.log("sections", sections)
				return sections
			}
		},
		onLoad(option) {
			this.bookId = option.bookId
			this.contentLoad()
		}
	}
</script>

<style>
	.cata {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.sticky {
		width: 95%;
	}
</style>
